<template>
  <div class="process-management">
    <el-row
      style="margin-bottom: 10px"
      type="flex"
      align="top"
      justify="space-between"
    >
      <processSteps :list="processList" @change="changeProcess" />
      <el-button size="small" type="primary" @click="uploadAchievement">
        上传阶段成果
      </el-button>
    </el-row>

    <el-table
      v-loading="listLoading"
      :data="tableData"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        label="阶段"
        align="center"
        prop="periodName"
        width="120"
      />
      <el-table-column
        label="计划开始时间"
        align="center"
        prop="planStartTime"
      />
      <el-table-column label="计划结束时间" align="center" prop="planEndTime" />
      <el-table-column label="审批结果" align="center" width="100">
        <template slot-scope="{ row }">
          {{ row.status == null ? "" : row.status == 1 ? "已驳回" : "已通过" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" plain @click="view(row)">
            查看
          </el-button>
          <el-button
            v-if="row.status == null"
            size="mini"
            type="danger"
            plain
            @click="del(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      width="500px"
      title="上传阶段成果"
      :visible.sync="visible"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="8em"
        label-suffix=":"
      >
        <el-form-item label="阶段">{{ form.periodName }}</el-form-item>
        <el-form-item label="计划开始时间">
          {{ form.planStartTime }}
        </el-form-item>
        <el-form-item label="计划结束时间">
          {{ form.planEndTime }}
        </el-form-item>
        <el-form-item label="成果文件" prop="periodAppendix">
          <el-upload
            :disabled="isView"
            :headers="upload.headers"
            :action="upload.action"
            :file-list="form.periodAppendix"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :on-preview="handlePreview"
          >
            <el-button :disabled="isView">上传文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button @click="visible = false">关 闭</el-button>
          <el-button v-if="!isView" type="primary" @click="submit">
            提 交
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getProjectPeriod,
  getPeriodDetails,
  getPeriodInfoById,
  submitPeriod,
  getPeriodDetail,
  deletePeriod,
} from "@/api2/projectManagement/process";
import processSteps from "../../../components/processSteps.vue";
import { getToken } from "@/utils/auth";
import { uploadUrl } from "@/const";

export default {
  inject: ["projectId"],
  components: { processSteps },
  data() {
    return {
      upload: {
        headers: { Authorization: getToken(), platform: 'WEB' },
        action: uploadUrl,
      },
      processList: [],
      tableData: [],
      listLoading: false,
      isView: false,
      visible: false,
      periodId: "",
      form: {},
      rules: {
        periodAppendix: [
          { required: true, message: "文件不能为空", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async changeProcess(periodId) {
      this.periodId = periodId;
      this.listLoading = true;
      const res = await getPeriodDetails({ periodId });
      this.tableData = res.data;
      this.listLoading = false;
    },
    getList() {
      getProjectPeriod({ projectId: this.projectId }).then(async (data) => {
        this.processList = data.data;
        const periodId = data.data[0]?.periodId;
        this.changeProcess(periodId);
      });
    },
    async uploadAchievement() {
      this.isView = false;
      this.visible = true;
      this.resetForm();
      const res = await getPeriodInfoById({ periodId: this.periodId });
      const {
        status,
        periodStartTime: planStartTime,
        periodEndTime: planEndTime,
        ...form
      } = res.data;
      this.form = { periodAppendix: [], planStartTime, planEndTime, ...form };
    },
    async view(row) {
      this.isView = true;
      this.visible = true;
      const res = await getPeriodDetail({
        periodDetailsId: row.periodDetailsId,
      });
      let { status, periodAppendix, ...form } = res.data;
      periodAppendix = JSON.parse(periodAppendix) || [];
      this.form = { periodAppendix, ...form };
    },
    del(row) {
      this.$confirm("是否删除此项数据?", { type: "warning" })
        .then(async () => {
          await deletePeriod({ ids: row.periodDetailsId });
          this.$message.success("删除成功");
          this.getList();
        })
        .catch(() => {});
    },
    beforeUpload(rawFile) {
      const isLt10M = rawFile.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error("文件大小限制在 10MB 内!");
        return false;
      }
    },
    handleSuccess(res, file) {
      if (res.code === 0) {
        const { fileName: name, url } = res.data;
        this.form.periodAppendix.push({ name, url });
      } else {
        this.form.periodAppendix?.splice(
          this.form.periodAppendix.indexOf(file),
          1
        );
      }
    },
    handleRemove(file, fileList) {
      this.form.fileList?.splice(this.form.fileList.indexOf(file), 1);
    },
    handlePreview(uploadFile) {
      window.open(uploadFile.url);
    },
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const { periodAppendix, ...form } = this.form;
          await submitPeriod({
            periodAppendix: JSON.stringify(periodAppendix),
            ...form,
          });
          this.$message.success("上传成功");
          this.visible = false;
          this.getList();
        }
      });
    },
    resetForm() {
      if (!this.$refs.form) return;
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  margin-bottom: 0;
  text-align: center;
  ::v-deep {
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
</style>
